<template>
	<view id="mine">
		<!-- 背景 -->
		<view class="bg-img bg-mask flex align-center" style="background-image: url('https://m.qpic.cn/psb?/V13tGzbL1JiE97/jK5xDYKkOSrElPzS7D357Lt9AL8UQq2hdwhyWhKJHd4!/b/dLYAAAAAAAAA&bo=dwH7AAAAAAADB68!&rf=viewer_4');height: 414upx;"></view>
		
		<!-- 列表 -->
		<view class="cu-list menu card-menu suspend" style="height:1000upx;">
			<view class="cu-item flex-direction" style="height: 250upx;border-radius: 6upx;">
				<view style="padding:6upx;position: absolute;top:0;left:50%;transform:translate( -50%, -50%);width:148upx;height:148upx;border-radius: 50%;box-shadow:0px 3px 10px rgba(0,0,0,0.2);background-color: #fff;">
					<image class="cu-avatar xl" style="width:100%;height:100%;border-radius: 50%;"
					:src="meObj.face==null||meObj.face==''?'/static/image/errorAvatar.svg':meObj.face" :lazy-load="true" mode="aspectFill" @error="imgError">
					</image>
				</view>
				
				<view class="text-orange text-lg" style="margin-top: 100upx;font-weight: bold;letter-spacing: 2upx;">{{meObj.name}}</view>
			</view>
			<navigator class="cu-item arrow" url="../reservation/reservation">
				<view class="content">
					<text class="iconfont iconclock text-orange" style="margin-right:16upx;"></text>
					<text>我的预约</text>
				</view>
			</navigator>
			<navigator class="cu-item arrow" url="../record/record">
				<view class="content">
					<text class="iconfont iconcourse text-orange" style="margin-right:16upx;"></text>
					<text>我的课程</text>
				</view>
			</navigator>
			<navigator class="cu-item arrow" url="../purchase/purchase">
				<view class="content">
					<text class="iconfont iconrecord text-orange" style="margin-right:16upx;"></text>
					<text>购买记录</text>
				</view>
			</navigator>
			<navigator class="cu-item arrow" url="../children/children">
				<view class="content">
					<text class="iconfont iconchild text-orange" style="margin-right:16upx;"></text>
					<text>孩子资料</text>
				</view>
			</navigator>
			<view class="cu-item arrow solid-bottom" @click="callMe">
				<view class="content">
					<text class="iconfont iconphone text-orange" style="margin-right:16upx;"></text>
					<text>联系我们</text>
				</view>
			</view>
		<!-- 	<navigator class="cu-item arrow">
				<view class="content">
					<text class="iconfont iconinfo text-orange" style="margin-right:16upx;"></text>
					<text>关于我们</text>
				</view>
			</navigator> -->
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				
			};
		}, 
		onLoad() {
			if(uni.getStorageSync('token')){
				uni.showNavigationBarLoading()
				
				// 基础信息
				this.getMe()
			}else{
				uni.redirectTo({
					url: '/pages/authorization/authorization'
				})
			}
		},
		methods: {
			async getMe(){
				let res = await this.$api.me()
				if(res.statusCode === 200){
					uni.hideNavigationBarLoading()
					
					console.log('基础信息', res.data.data)
					
					this.$store.dispatch('sendMe', res.data.data)
				}
			},
			// 图片加载失败
			imgError: function () {
				this.$store.state.meObj.face = '/static/image/errorAvatar.svg'
			},
			callMe(){
				uni.makePhoneCall({
				    phoneNumber: '028-83700200'
				})
			}
		},
		computed: {
			...mapState(['meObj'])
		}
	} 
</script>

<style lang="scss">
	page{
		background-color: $uni-bg-color;
	}
	#mine{
		.suspend{
			margin-top: -180upx;
			overflow: visible;
		}
		.content{
			display: flex;
			align-items: center;
			font-size: 32upx !important;
		}
		.iconfont{
			font-size: 40upx;
		}
		.cu-item{
			min-height: 92upx;
		}
	}
</style>
